<template>
  <div>
    <div class="pageHistogram">
      <div class="day" title="点击切换显示方式">
        <b @click="pressureTab(0)" :class="{Day}">日</b>
        <b @click="pressureTab(1)" :class="{Month}">月</b>
      </div>
      <div id="pressure"></div>
    </div>
  </div>
</template>
<script>
export default {
    props:{
        pressureData:{
            type:Array,
            default:[]
        },
        pressureTime:{
            type:Array,
            default:[]
        },
       Day:{
          type:Boolean,
          
      },
      Month:{
          type:Boolean

      }

    },
    watch:{
        pressureTime(){
                this.pressure()
                this.color()
        },
        pressureData(){
                this.pressure()
                this.color()

        }
    },
  data() {
    return {
      Day: true,
      Month: false,
      colorArr:[]
    };
  },
  mounted() {
    // this.pressure();
  },
  methods: {
    color(){
          let arr=[]
          for(var i=0;i<this.pressureTime.length;i++){
                      if(i%2==1){
                              arr.push("#00d3ff")
                      }else {
                          arr.push("#ffae5c")
                      }
          }
          this.colorArr=arr
              
    },
    pressureTab(e) {
      this.$emit("pressureTab", e);
    },
    pressure() {
    var self=this
      var myChart = echarts.init(document.querySelector("#pressure"));
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "11%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
              name: this.Day  ? "时间" : "日期",
            data: this.pressureTime,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 10, //更改坐标轴文字大小
                interval: 15
              }
            },
            axisLine: {
              lineStyle: {
                color: "#00a0e9", //更改坐标轴颜色
                width:3
              }
            },
            
          }
        ],
        yAxis: [
          {
            type: "value",
              splitLine: {
                  show:false
          },

            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff", //更改坐标轴文字颜色
                fontSize: 10, //更改坐标轴文字大小
                interval: 15
              }
            },
            axisLine: {
              lineStyle: {
                color: "#000", //更改坐标轴颜色
                width: 3
              }
            }
          }
        ],
        series: [
          {
            name: "大气压强",
            type: "bar",
            barWidth: "60%",
            data: this.pressureData,
             itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = self.colorArr
                  return colorList[params.dataIndex];
                }
              }
            },
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
@import url("../../assets/css/day.css");
.pageHistogram {
  width: 445px;
  height: 301px;
  position: relative;
}
#pressure {
  width: 445px;
  height: 301px;
}
</style>